import { Toggle } from "@radix-ui/react-toggle"
import { ToggleGroupItem, ToggleGroup } from "@radix-ui/react-toggle-group"
import { styled } from '@stitches/react';

const StyledToggle = styled(Toggle, {
    color: "var(--mauve-11)",
    height: "35px",
    width: "35px",
    display: "flex",
    fontSize: "15px",
    lineHeight: 1,
    alignItems: "center",
    justifyContent: "center",
    marginLeft: "1px",
    cursor: "pointer",
    "&:hover": {
        backgroundColor: "var(--violet-3)"
    }
})

const StyledToggleGroupItem = styled(ToggleGroupItem, {
    color: "var(--mauve-11)",
    height: "35px",
    width: "35px",
    display: "flex",
    fontSize: "15px",
    lineHeight: 1,
    alignItems: "center",
    justifyContent: "center",
    marginLeft: "1px",
    cursor: "pointer",
    "&:hover": {
        backgroundColor: "var(--violet-3)"
    }
})

const StyledToggleGroup = styled(ToggleGroup, {
    display: "inline-flex",
    bordeRadius: "4px"
})

export const ToggleButton = ({
    children,
    onMouseDown,
    checked = false
}: React.PropsWithChildren<{
    onMouseDown?: any,
    checked?: boolean
}>) => {
    return (
        <StyledToggle
            className={`shadow  ${checked ? "ToggleSelected" : ""}`}
            onMouseDown={onMouseDown}
        >
            {children}
        </StyledToggle>
    )
}

export const ToggleGroupButton = ({
    children,
    value,
    checked = false,
    ...rest
}: React.PropsWithChildren<{
    value: string,
    checked?: boolean,
    onMouseDown: any,
}>) => {
    return (
        <StyledToggleGroupItem
            value={value}
            className={`shadow  ${checked ? "ToggleSelected" : ""}`}
            {...rest}
        >
            {children}
        </StyledToggleGroupItem>
    )
}

export const ToggleGroupContainer = ({
    children
}: React.PropsWithChildren) => {

    return (
        <StyledToggleGroup
            type="single"
        >
            {children}
        </StyledToggleGroup>
    )
}